<template>
  <div class="f-cc bg-color">
    <div class="titles">
      <div @click="changePass"  :class="[flag ?'active':' ']">密码登录</div>
      <div @click="change"  :class="[flag ?'':'active']">短信登录</div>
    </div>
    <div :class="['f-cc','vh100']" v-if="flag">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="账号" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="load || globalStore.state.getInfoLoading">
            登录
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="f-cc vh100" v-else>
      <el-form ref="ruleFormRef2" :model="ruleForm2" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="账号" prop="phone">
          <el-input v-model="ruleForm2.phone" placeholder="请输入手机账号" />
        </el-form-item>
        <el-form-item label="验证码" prop="password">
          <el-input v-model="ruleForm2.code" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef2)" :loading="load || globalStore.state.getInfoLoading">
            登录
          </el-button>
          <el-button @click="getYzm(ruleForm2.phone)">获取验证码</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginAPi, shortMsgApi } from '../apis/user';
import { ElMessage, FormInstance, FormRules } from 'element-plus'
//路由配置  已经权限配置
// import { initRoutes } from '../router';
import { dynamicRouter } from '../router';
import { filterMenusOrRoutes } from '../utils/filterMenu';
//pinia
import { useGlobalStore } from '../store/global';
const globalStore = useGlobalStore()
console.log(globalStore);


const router = useRouter()
const formSize = ref('default')
//控制登录按钮的loading效果
const load = ref(false)

const flag = ref(true)
const ruleFormRef = ref<FormInstance>()

const ruleFormRef2 = ref<FormInstance>()
const ruleForm = reactive({
  phone: '',
  password: '',

})

const ruleForm2 = reactive({
  phone: '',
  code: '',

})

const rules = reactive<FormRules>({
  phone: [
    { required: true, message: '请输入你的账户', trigger: 'blur' },
    { min: 3, max: 12, message: 'Length should be 3 to 12', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
  ],

})
const res = () => {
  console.log(123)

}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      load.value = true
      loginAPi(ruleForm)
        //接口成功
        .then(res => {
          console.log(res);
          //接口成功，保存数据
          load.value = false
          const { token, state } = res
          localStorage.token = token
          localStorage.state = state
          localStorage.userInfo = JSON.stringify({ icon: res.data.photo, account: res.data.account })
          //跳转之前，路由配置渲染
          // initRoutes(filterMenusOrRoutes(dynamicRouter,userInfo.role))
          //登录成功页面提示
          ElMessage.success('登录成功')
          //跳转
          router.replace('/home')
        })
        .catch(() => {       //接口错误
          load.value = false
        })

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

const getYzm = (phone: any) => {
  shortMsgApi(phone)
    .then((res) => {
      console.log(res);

    })
}
//切换短信登录
const change = () => {
  flag.value = false
}
//切换密码登录
const changePass = ()=>{
  flag.value = true
}
</script>

<style lang="less" scoped>
.bg {
  height: 99vh;
  background-size: cover;
  box-shadow: 10px 10px 10px 10px rgba(127, 128, 129);
  color: rgb(127, 128, 129);
}

.bg-color {
  background-color: #262842;
 
}

.active{
  color: rgb(59, 61, 212) !important;
  font-weight: 550;
}

.titles {
  display: flex;
  position: absolute;
  top: 0.63rem;
  top: 35%;
  left: 48%;
  justify-content: space-between;
  div {
    color: bisque;
    width: 100px;
    font-size: 20px;
    // &:hover {
    //   color: rgb(59, 61, 212);
    //   font-weight: 550;
    // }
  }
}
</style>